<template>
  <div id="visitChart" style="height: 350px"></div>
</template>

<script setup lang="ts">
  import * as echarts from 'echarts'
  import { COLOR_ARR } from '@/utils/constants/common'

  const props = defineProps({
    data: {
      type: Array,
      default: () => []
    }
  })

  const myChart = ref()
  const itemList = ref<any>([])

  const handleSetVisitChart = () => {
    myChart.value = echarts.init(document.getElementById('visitChart'))
    const offsetX = 20
    const offsetY = 10
    // 绘制左侧面
    const CubeLeft = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0
      },
      buildPath: function (ctx, shape) {
        // 会canvas的应该都能看得懂，shape是从custom传入的
        const xAxisPoint = shape.xAxisPoint
        // console.log(shape);
        const c0 = [shape.x, shape.y]
        const c1 = [shape.x - offsetX, shape.y - offsetY]
        const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY]
        const c3 = [xAxisPoint[0], xAxisPoint[1]]
        ctx
          .moveTo(c0[0], c0[1])
          .lineTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .closePath()
      }
    })
    // 绘制右侧面
    const CubeRight = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0
      },
      buildPath: function (ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c1 = [shape.x, shape.y]
        const c2 = [xAxisPoint[0], xAxisPoint[1]]
        const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY]
        const c4 = [shape.x + offsetX, shape.y - offsetY]
        ctx
          .moveTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .lineTo(c4[0], c4[1])
          .closePath()
      }
    })
    // 绘制顶面
    const CubeTop = echarts.graphic.extendShape({
      shape: {
        x: 0,
        y: 0
      },
      buildPath: function (ctx, shape) {
        const c1 = [shape.x, shape.y]
        const c2 = [shape.x + offsetX, shape.y - offsetY] // 右点
        const c3 = [shape.x, shape.y - offsetX]
        const c4 = [shape.x - offsetX, shape.y - offsetY]
        ctx
          .moveTo(c1[0], c1[1])
          .lineTo(c2[0], c2[1])
          .lineTo(c3[0], c3[1])
          .lineTo(c4[0], c4[1])
          .closePath()
      }
    })
    // 注册三个面图形
    echarts.graphic.registerShape('CubeLeft', CubeLeft)
    echarts.graphic.registerShape('CubeRight', CubeRight)
    echarts.graphic.registerShape('CubeTop', CubeTop)

    let option = {
      // backgroundColor: '#012366',
      color: COLOR_ARR,
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        },
        formatter: function (params) {
          const item = params[1]
          return '锭号' + item.name + ' : ' + item.value
        }
      },
      grid: {
        left: '1%',
        right: '1%',
        top: 40,
        bottom: 30,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: itemList.value.names,
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: '#589dea'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          fontSize: 14
        }
      },
      yAxis: {
        type: 'value',
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: '#589dea'
          }
        },
        splitLine: {
          show: false,
          lineStyle: {
            color: '#153D7D'
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          fontSize: 14
        }
        // boundaryGap: ['20%', '20%'],
      },
      dataZoom: [
        {
          show: true,
          type: 'slider',
          bottom: 0,
          right: 30,
          left: 50,
          labelFormatter: function (value) {
            // 在这里写你需要的时间格式a
            // alert(value)
            // value = _this.$Date(value).format('YYYY-MM-DD HH:mm');
            return value
          },
          xAxisIndex: [0],
          filterMode: 'weakFilter',
          backgroundColor: '#fafafa',
          startValue: 0,
          endValue: 20
        }
      ],
      series: [
        {
          type: 'custom',
          renderItem: (params, api) => {
            const location = api.coord([api.value(0), api.value(1)])
            // barCategoryGap:120;
            return {
              type: 'group',
              layoutRect: 30,
              children: [
                {
                  type: 'CubeLeft',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#33BCEB'
                      },
                      {
                        offset: 1,
                        color: '#719bdb'
                      }
                    ])
                  }
                },
                {
                  type: 'CubeRight',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#28A2CE'
                      },
                      {
                        offset: 1,
                        color: '#709de5'
                      }
                    ])
                  }
                },
                {
                  type: 'CubeTop',
                  shape: {
                    api,
                    xValue: api.value(0),
                    yValue: api.value(1),
                    x: location[0],
                    y: location[1],
                    xAxisPoint: api.coord([api.value(0), 0])
                  },
                  style: {
                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: '#43C4F1'
                      },
                      {
                        offset: 1,
                        color: '#28A2CE'
                      }
                    ])
                  }
                }
              ]
            }
          },
          data: itemList.value.values
        },
        {
          type: 'bar',
          label: {
            normal: {
              show: true,
              position: 'top',
              formatter: (e) => {
                return e.value
              },
              fontSize: 16,
              color: '#43C4F1',
              offset: [0, -10]
            }
          },
          itemStyle: {
            color: 'transparent'
          },
          tooltip: {},
          data: itemList.value.values
        }
      ]
    }
    myChart.value.clear()
    myChart.value.setOption(option, true)
    window.addEventListener('resize', function () {
      myChart.value.resize()
    })
  }

  watch(
    () => props.data,
    (newValue) => {
      itemList.value = newValue
      nextTick(() => {
        handleSetVisitChart()
      })
    },
    { deep: true, immediate: true }
  )
</script>

<style scoped></style>
